<template>

	<div class="one">
		<div class="one-one">
			<!-- 上边图片部分 -->

			<div class="img">
				<img class="img-tu" src="../../../../public/img/设计趋势01.png" alt="">
			</div>
			<!-- 作者\类别 -->
			<div class=" bottom">
				<div class="uname-box" v-for="el in props">
					<div class="left">
						<img class="utu" src="../../../../public/img/gz-04.webp" alt="">
						<!-- 关注的用户昵称 -->
						<!-- <div class=" uname">{{props}}</div> -->
						<div class="uname">{{el}}</div>
						<!-- <div class="uname" v-for="el3 in props.el">{{el3}}</div> -->
					</div>
					<div class="dra">
						<div class="right">
							<div class="dra">画板</div>
							<div class="dra">{3D系}</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 转采\喜欢 -->
			<div class="like">
				<div class="one1">
					<img class="replay" src="../../../../public/img/转采.png" alt="">
					<div class="shuz">4</div>
				</div>
				<div class="lone"><img class="llike" src="../../../../public/img/喜欢.png" alt=""></div>

			</div>
		</div>
	</div>


</template>

<script setup>
	const props = defineProps({
		el: {

		}
	})
	// console.log(props, "nihiiiiiiiiii");

</script>

<style lang="scss" scoped>
	.one {
		width: 240px;
		height: auto;
		/* margin: 10px; */

		.one-one {
			width: 240px;
			height: auto;

			/* #yinying {
				width: 270px;
				height: auto;
				background-color: rgb(193, 193, 194);
				position: relative;
				border: 1px solid salmon;

			} */

			.img {
				width: 240px;
				height: 126px;

				#yinying {
					width: 270px;
					height: auto;
					background-color: rgb(193, 193, 194);
					position: relative;
					border: 1px solid salmon;
					z-index: 2000;

				}

				.img-tu {
					width: 240px;
					height: 126px;
				}
			}

			&:hover {
				cursor: pointer;
			}

			.bottom {
				width: 240px;
				height: 20px;

				.uname-box {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
					}


					.utu {
						width: 20px;
						height: 20px;
						border-radius: 50px;
					}

					.uname {
						font-size: 12px;
						margin-left: 3px;
						color: rgb(109, 110, 112)
					}

					.right {
						font-size: 12px;
						display: flex;
						color: rgb(109, 110, 112);
						font-size: 12px;
					}
				}
			}

			.like {
				width: 240px;
				height: 20px;
				margin-top: 10px;
				display: flex;
				color: rgb(109, 110, 112);

				.one1 {
					width: 25px;
					height: 20px;
					display: flex;
					justify-content: space-between;
					line-height: 20px;
					font-size: 12px;

					.replay {
						width: 16px;
						height: 16px;

					}

				}

				.llike {
					width: 16px;
					height: 16px;
					margin-left: 10px;
				}
			}
		}
	}
</style>